<html>
<head>
    <title>用电参数</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
            overflow: hidden;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }
        .paramSpan{
            font-size: 18px;
            cursor: pointer;
        }

        .devSpan{
            top: 40px;
            position: relative;
            white-space: nowrap;
        }
        .chart-outer {
            height: 200px;
        }
        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }
        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }
        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }
        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }
        .panel-f:last-child {
            margin-right: -5px;
        }
        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }
        li {
            list-style-type: none;
        }
        .paramDiv {
            width: 100%;
            background: #fff;
            height: auto;
        }
        .deviceInfo {
            height: 300px;
        }
        .chart-outer {
            height: 300px;
        }
        .Protree{
            overflow-y: scroll;overflow-x:scroll;width: 100%
        }
    </style>
</head>
<body>
<div class="page" id="page-load"  >
    <div class="page-main" style="display: none">
        <el-row :style="{height:(height+20)+'px'}">
            <!--<el-col :span="4">-->
            <!--<dev-tree v-on:click-node="aa" :tabsign="'z'" ></dev-tree>-->
            <!--</el-col>-->


            <el-col :span="4" style="border: 1px solid #1ab394; " >
                <div style="background:linear-gradient(45deg, #0081ff, #1cbbb4);padding: 15px 10px;color: #ffffff;" >企业列表</div>
                <el-input
                        placeholder="输入关键字进行筛选"
                        v-model="filterText" style="border-radius: 0px" >
                </el-input>
                <el-tree
                        :data="devTree"
                        node-key="Id"
                        @node-click = "nodeClick"
                        :filter-node-method="filterNode"
                        ref="tree"
                        :props="defaultProps" class="Protree" :style="{height:(height-20)+'px'}">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"></i>{{data.Text}}
            </span>
        </span>
                </el-tree>
            </el-col>

            <el-col :span="20">
                <el-form :inline="true" style="margin-top: 10px;margin-bottom: 0px">
                    <el-form-item label="设备名称">
                        <el-input v-model="param.DeviceName" placeholder="设备名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
                    <el-table
                            :data="tableData"
                            style="width: auto;" :height="height>500?500:height">
                        <el-table-column
                                prop="projectName"
                                label="企业名称" align="center">
                        </el-table-column>
                        <el-table-column
                                prop="DeviceID"
                                label="设备编码" align="center">
                        </el-table-column>
                        <el-table-column
                                prop="DeviceName"
                                label="设备名称" align="center">
                        </el-table-column>
                        <!--<el-table-column-->
                                <!--prop="online"-->
                                <!--label="在线状态" align="center">-->
                            <!--<template slot-scope="scope">-->
                                <!--<template v-if="scope.row.online == 1">-->
                                    <!--<el-tag type="success">在线</el-tag>-->
                                <!--</template>-->
                                <!--<template v-if="scope.row.online == 0">-->
                                    <!--<el-tag type="danger">离线</el-tag>-->
                               <!--</template>-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <el-table-column
                                prop="deviceLocation"
                                label="安装位置" align="center">
                        </el-table-column>
                        <el-table-column
                                prop="deviceModelName"
                                label="设备类型" align="center">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope" >
                                <el-button
                                        size="mini"
                                        @click="handleReal(scope.$index, scope.row)">实时</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleHis(scope.$index, scope.row)">历史</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

<div style="float: left;background: white">
                    <el-pagination style="float:right" background layout="prev, pager, next" :total="param.totalCount" :current-page.sync="param.pageno" :page-size="param.pagesize" @current-change="onChangePage">
                    </el-pagination>
</div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="实时数据" :visible.sync="devVisible" width="70%" style="margin-top:10px;height: 80%;display: none" @close='closeDialog' :close-on-click-modal="false">

        <el-row>
            <el-col :span="10">
                <div class="deviceInfo">
                    <ul class="attr">
                        <li>设备名称:　　{{device.DeviceName}}</li>
                        <li>设备编号:　　{{device.DeviceId}}</li>
                        <li>所属区域:　　{{device.zoneName}}</li>
                        <li>所属部门:　　{{device.DepartmentName}}</li>
                        <li>设备状态:　　<span v-if="device.online==1">在线</span><span v-else-if="device.online==0">离线</span></li>
                        <li>最近时间:　　{{device.updateTime}}</li>
                    </ul>
                </div>

            </el-col>
            <el-col :span="14">
                <div class="chart-outer" id="realChart">

                </div>
            </el-col>
        </el-row>
        <div class="paramDiv" >
            <el-row style="flex-wrap: nowrap">
                <el-col :span="3" v-for="(item,index) in  paramData">
                    <div class="panel panel-f" @click="loadDeviceParam(index)">
                        <p>{{item.dp_name}}</p>
                        <h5>{{item.dp_value}}{{item.dp_unitid}}</h5>
                    </div>
                </el-col>
            </el-row>
        </div>


    </el-dialog>

    <el-dialog title="历史数据" :visible.sync="hisVisible" width="70%" style="margin-top:10px;height: 80%;display: none" @close='closeDialog' :close-on-click-modal="false">

        <el-row >
            <div class="tag-group">
                <span class="tag-group__title">历史数据</span>
                <el-date-picker
                        v-model="day"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期" style="width: 170px"
                        @change="dateChange">
                </el-date-picker>
                <el-tag
                        v-for="(item,index) in hisData.fields"
                        :key="item.title"
                        :type="paramIndex==index?'':'info'"
                        effect="dark"
                        @click="hisClick(index)"
                        style="cursor: pointer">
                    {{ item.title }}
                </el-tag>
            </div>
            <el-col :span="24" style="margin-top: 10px">
                <div id="hisChart" class="chart-outer" >

                </div>
            </el-col>
        </el-row>
    </el-dialog>

</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-load',
        data:{
            expandId:'',
            currentId:'',
            devTree:'',   //树形数据
            height:500,
            filterText:'',
            defaultProps:{
                label:'Text',
                id:'Id',
            },
            param:{
                UserId:'',
                pagesize:10,
                pageno:1,
                totalCount:10,
                DeviceName:'',
            },
            tableData:[],
            devVisible:false,
            hisVisible:false,
            timer:null,
            paramData:'',
            device:'',
            index:0,
            paramIndex:0,
            elOptions:{},
            day:'',
            hisData:{}
        },
        methods:{
            search:function(){
                this.param.pageno = 1;
                 this.getDeviceList();
            },
            nodeClick:function(data){
                this.currentId = data.Id.split('_')[1];
                this.param.UserId = this.currentId;
                // this.getLoadData();
                console.log(data)
                this.param.pageno = 1;
                this.getDeviceList();
            },
            //递归成树形数据
            parseTree(data,pid) {
                const result = []
                let temp = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].ParentId === pid) {
                        const obj =data[i]
                        if (parseInt(obj.Type - 110) == 1 || parseInt(obj.Type - 110) == 0){
                            obj.icon = 'el-icon-s-home';

                        }else if  (parseInt(obj.Type - 110) == 2 || parseInt(obj.Type - 110) == 10){
                            obj.icon = 'el-icon-s-custom'
                        }else{
                            obj.icon = 'el-icon-menu'
                        }
                        temp = this.parseTree(data, data[i].Id)
                        if (temp.length > 0) {
                            obj.children = temp
                        }
                        result.push(obj)
                    }
                }
                return result
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.Text.indexOf(value) !== -1;
            },
            handleReal(index,row){
                this.getDeviceData({deviceId:row.DeviceID,isEnvir:1});
                this.devVisible = true;
            },
            handleHis(index,row){

                setTimeout(()=>{
                    this.hisVisible = true;
                    this.deviceId = row.DeviceID;
                    this.getDeviceHis();
                },10)

            },
            getDeviceList(){
                HttpUtil.get('Device/List',this.param).success((r)=>{
                        this.tableData = r.data;
                        this.param.totalCount = r.total;
                })
            },
            onChangePage(page){
                this.param.pageno = page;
                this.getDeviceList();
            },
            getDeviceData(params){
                HttpUtil.get('device/getById',params).success((res)=>{
                    this.device = res.data;
                    HttpUtil.get('device/Monitor',params).success((res)=>{
                        this.paramData = res.data
                        this.getChart('realChart',this.paramData[0]);
                    })
                })
            },
            loadDeviceParam(index) {
                this.index = index;
                this.getChart('realChart',this.paramData[index]);
            },
            getChart: function (id, data) {
                let myChart = echarts.init(document.getElementById(id));
                var option = {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: data.dp_name,
                            type: 'gauge',
                            min: 0,
                            max: data.dp_value*1.4,
                            splitNumber: 8,
                            detail: {formatter: data.dp_value+data.dp_unitid},
                            data: [{value: data.dp_value, name: data.dp_name}],
                            radius: "100%", //仪表大小
                        }
                    ]
                };
                myChart.setOption(option);
            },
            closeDialog(){
                clearInterval(this.time1);
                this.devVisible = false;
            },
            dateChange(date){
                this.day = date;
                this.paramIndex = 0;
                this.getDeviceHis();
            },
            hisClick(key){
                this.paramIndex = key;
                let chartData = {
                    title:this.hisData.fields[key].title,
                    yData:[],
                    xData:[],
                    unit:this.hisData.fields[key].unit,
                };
                let list  = this.hisData;
                for (let ind in list.values){
                    chartData.yData.push(list.values[ind][this.hisData.fields[key].name]);
                    chartData.xData.push(list.values[ind].lastUpdate.split('T')[1])
                }
                this.drawChart(chartData);
            },
            getDeviceHis(){
                HttpUtil.get('device/hisData',{deviceNo:this.deviceId,pagesize:2888,dat: this.day,isEnvir:1}).success((res)=>{
                    res.data.fields=[
                        {"name":"UA","title":"A相电压","unit":"V"},
                        {"name":"UB","title":"B相电压","unit":"V"},
                        {"name":"UC","title":"C相电压","unit":"V"},
                        {"name":"IA","title":"A相电流","unit":"A"},
                        {"name":"IB","title":"B相电流","unit":"A"},
                        {"name":"IC","title":"C相电流","unit":"A"},
                        {"name":"I_Zero","title":"漏电流","unit":"mA"},
                        {"name":"PA","title":"A相功率","unit":"KW"},
                        {"name":"PB","title":"B相功率","unit":"KW"},
                        {"name":"PC","title":"C相功率","unit":"KW"},
                        {"name":"PSum","title":"总功率","unit":"KW"},
                        {"name":"ESum","title":"总电能","unit":"KWh"},
                        {"name":"PFSum","title":"总功率因数","unit":""},
                        {"name":"SSum","title":"总视在功率","unit":"KVA"},
                        {"name":"EA","title":"A相电能","unit":"KWh"},
                        {"name":"EB","title":"B相电能","unit":"KWh"},
                        {"name":"EC","title":"C相电能","unit":"KWh"},
                        {"name":"Temp1","title":"温度1","unit":"℃"},
                        {"name":"Temp2","title":"温度2","unit":"℃"},
                        {"name":"Temp3","title":"温度3","unit":"℃"},
                        {"name":"Temp4","title":"温度4","unit":"℃"},
                    ]
                    this.hisData = res.data;
                    this.hisClick(0);
                })
            },
            drawChart(data){
                let options = {
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    title: {
                        left: 'center',
                        text: data.title,
                    },

                    tooltip:{
                        trigger: 'axis',
                    },
                    grid: {
                        top: '12%',
                        left: '1%',
                        right: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type : 'category',
                            data:data.xData
                        }
                    ],
                    yAxis: [
                        {
                            type : 'value',
                            name: '单位'+data.unit,

                        }
                    ],

                    dataZoom: [
                        {
                            show: true,
                            start: 94,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 94,
                            end: 100,
                        },
                        {
                            show: false,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series : [
                        {
                            type: 'line',
                            data: data.yData,
                            name:'时间：' + data.title,
                            // markLine: {
                            //     silent: true,
                            //     lineStyle: {
                            //         normal: {
                            //             color: 'red'                   // 这儿设置安全基线颜色
                            //         }
                            //     },
                            //     data: [{
                            //         yAxis:270
                            //     }],
                            //     label: {
                            //         normal: {
                            //             formatter: '报警\n基线'           // 这儿设置安全基线
                            //         }
                            //     },
                            // },
                        },
                    ],
                };
                let myChart = echarts.init(document.getElementById('hisChart'));
                myChart.setOption(options);
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created:function() {

            this.height = HttpUtil.getQueryString('height')?HttpUtil.getQueryString('height'): window.innerHeight;
            const loading = this.$loading({
                lock: true,
                text: '加载数据中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            HttpUtil.get('User/getUserTree',{UserId:SiteConfig.account.id,level:0,zoneType:3,energyType:'Total'}).success((res)=>{
                let data = res.data.filter((item)=>{
                    return parseInt(item.Type - 110) == 1 || parseInt(item.Type - 110) == 2 || parseInt(item.Type - 110) == 10 || parseInt(item.Type - 110) == 0
                });
                this.devTree =  this.parseTree(data,'U_0');
                loading.close();
                $('.page-main').show();
            });
        },
        mounted:function(){
            this.day= TimeUtil.convertToString(new Date()).substr(0,10);
            this.param.UserId = SiteConfig.account.id;
            this.getDeviceList();
        }
    });


</script>

</body>
</html>
